<?php
$this->load->helper("form");
$this->load->helper("inflector");
?>
<html>
<head>
<title>Rocky SIFE Timesheets</title>

<link  href="<?php echo site_url("static/css/timesheet.css"); ?>" type="text/css" rel="stylesheet" />
<link  href="<?php echo site_url("static/css/datatable.css"); ?>" type="text/css" rel="stylesheet" />
<link  href="<?php echo site_url("static/css/ColReorder.css"); ?>" type="text/css" rel="stylesheet" />
<link  href="<?php echo site_url("static/css/{$theme}/jquery-ui-1.8.6.custom.css"); ?>" type="text/css" rel="stylesheet" />

<script src="https://www.google.com/jsapi?key=ABQIAAAAt4ZDAC3csYjMuqm2oa5RmBTJQa0g3IQ9GZqIMmInSLzwtGDKaBSaVPiAmCNdGojVyoyWuWjp2fD9HA" type="text/javascript"></script>
<script type=text/javascript>
//<![CDATA[
google.load("jquery", "1.4.4");
google.load("jqueryui", "1.8.6");
//]]>
</script>
<script src="<?php echo site_url("static/js/jquery.dataTables.min.js"); ?>" type="text/javascript"></script>
<script src="<?php echo site_url("static/js/ColReorder.nightly.min.js"); ?>" type="text/javascript"></script>
<script type=text/javascript> 
//<![CDATA[
$(function() {
    $("#start").datepicker();
    $("#end").datepicker();

	$( ".portlet-column" ).sortable({
		connectWith: ".portlet-column"
	});

	$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
		.find( ".portlet-header" )
			.addClass( "ui-widget-header ui-corner-all" )
			.prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
			.end()
		.find( ".portlet-content" );

	$( ".portlet-header .ui-icon" ).click(function() {
		$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
		$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
	});
	$( ".portlet-header .ui-icon" ).click();
	$( "#portlet-header-google-calendar .ui-icon" ).click();

	$( ".column" ).disableSelection();

	var baseurl = "<?php echo site_url('calendars/index/'); ?>/";
	$("#daterange").click(function() {
		var pat = /\//g;
		var url = baseurl
			+ $("#start").val().replace(pat, '-') + "/"
			+ $("#end").val().replace(pat, '-');
		window.location.href = url;
	});
});
//]]>
</script>

</head>

<body>
	<div id=header><div id=menu>
		<input type=text name=start id=start value="<?php echo $start; ?>" />
		<input type=text name=end id=end value="<?php echo $end; ?>" />
		<input type=submit id="daterange" value="Date range..." />
		<span class=logout><?php echo anchor('calendars/logout/', "Logout"); ?></span>
	</div></div>
	<div class=portlet-column id=portlet-column-timesheets>
<?php $calsrc ="https://www.google.com/calendar/hosted/rockysife.com/embed?height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;"; ?>
<?php foreach($calendars as $cid => $calendar): ?>
	<?php $calsrc .= "src={$calendar['id']}&amp;color=".urlencode($calendar['color'])."&amp;"; ?>
	<div class="portlet timesheet" id=<?php echo camelize($calendar['title']); ?>>
		<div class=portlet-header id=portlet-header-<?php echo $cid; ?>><?php
			$title = $calendar['title'];
			if(strpos($title, '@')){//We probably have an email address
				$title = strstr($title, '@', true);//we'll get the first half.
				$title = humanize($title, '.'); //Humanize, breaking at the .
			}
			echo $title;
		?> - <?php echo round($calendar['total'] / 3600, 2); ?> hours</div>
		<div class=portlet-content>
		<table id="<?php echo $cid; ?>" class="display timesheet" border=1 cellspacing=0 cellpadding=1>
			<thead><tr><th>Date</th><th>Event</th><th>Start</th><th>End</th><th>Time</th></tr></thead>
			<tbody>
			<?php foreach($calendar['events'] as $event): ?>
				<tr>
				<td><?php echo date("m/d/Y", $event['date']); ?></td>
				<td><?php echo $event['title']; ?></td>
				<td><?php echo date("g:ia", $event['start']); ?></td>
				<td><?php echo date("g:ia", $event['end']); ?></td>
				<td><?php echo $event['time'] / 60; ?>&nbsp;mins</td>
				</tr>
			<?php endforeach; ?>
			</tbody>
		</table>
		<style type="text/css">
				.portlet-column-<?php echo $cid; ?> { width: 50%; float: left; }
				.portlet-header-<?php echo $cid; ?> { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
		</style>
		<script type=text/javascript> 
		//<![CDATA[
		$(function() {
			$('#<?php echo $cid; ?>').dataTable({
				"bJQueryUI": true,
				"sPaginationType": "full_numbers",
				"bAutoWidth" : false,
				//"sDom" : '<"H"lfr><"scrollable ui-widget-content"t><"F"ip>',
				"sDom" : 'Rt',
				"iDisplayLength" : 50000,
				"bRetrieve" : true
			});
		});
		//]]>
		</script>
		</div>
	</div>
<?php endforeach; ?>
	</div>
	<div class=portlet-column id=portlet-column-calendar>
		<div class="portlet timesheet" id=google-calendar ?>
			<div class=portlet-header id=portlet-header-google-calendar>Calendar</div>
			<div class="portlet-content">
				<iframe src="<?php echo $calsrc; ?>ctz=America%2FDenver" style="border-width:0 " width="100%" height="600" frameborder="0" scrolling="no"></iframe>	
			</div>
		</div>
	</div>
</body>
</html>

